<template>
  <div>
    <!-- 门店管理 -->

    <!-- 面包屑导航 -->
    <Crumbs></Crumbs>

    <!-- 组件切换 -->
    <div class="store_list">
      <button @click="storeListBtn1" class="storeListBtn">门店列表</button>
      <button @click="storeListBtn2">添加门店</button>
    </div>
    <div class="storeAddList">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="storename" label="门店名称" width="150"> </el-table-column>
        <el-table-column label="门店图片" width="150">
          <template slot-scope="scope">
            <div>
              <el-image :src="scope.row.storeimg"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="position" label="门店位置" width="150"> </el-table-column>
        <el-table-column prop="phone" label="门店电话" width="150"> </el-table-column>
        <el-table-column prop="operator" label="门店操作员" width="150"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
            <el-button type="text" size="small" @click="information(scope.row)">修改信息</el-button>
            <el-button type="text" size="small" @click="deleteStore(scope.row)">删除门店</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Crumbs from './Crumbs.vue'
import { getXdeletestoreAdmin, getXstoreAdmin } from '../../api/index'
export default {
  components: { Crumbs },
  data() {
    return {
      tableData: [], //渲染数据
    }
  },
  methods: {
    storeListBtn1() {
      this.$router.push('/storeAdmin')
    },
    storeListBtn2() {
      this.$router.push('/addStore')
    },
    //添加门店
    handleClick(row) {
      console.log(row)
      this.$router.push({
        path: '/viewStore',
        name: 'viewStore',
        params: {
          list: row,
        },
      })
      getXstoreAdmin().then((res) => {
        this.tableData = res.data
      })
    },
    //删除门店
    deleteStore(row) {
      console.log(row)
      getXdeletestoreAdmin({
        id: row.id,
      }).then((res) => {
        getXstoreAdmin().then((res) => {
          this.tableData = res.data
        })
      })
    },
    //修改门店
    information(row) {
      console.log(row)
      this.$router.push({
        path: '/information',
        name: 'information',
        params: {
          list: row,
        },
      })
    },
  },
  created() {
    //获取数据
    getXstoreAdmin().then((res) => {
      // console.log(res)
      this.tableData = res.data
      console.log(this.tableData)
    })
  },
}
</script>

<style lang="scss" scoped>
.store_list {
  width: 1200px;
  margin: 0 auto;
  button {
    width: 100px;
    height: 30px;
    border: none;
    margin: 10px 30px 30px 0px;
    border-radius: 10px;
  }
  .storeListBtn {
    background: rgb(220, 183, 63);
    color: white;
  }
}
.storeAddList {
  width: 1000px;
  margin: auto;
  .el-table th.el-table__cell {
    background: lightgray;
  }
}
</style>
